<template>
  <div class="layout-full">
    <div v-if="isShowHead" class="d-bar">
      <div class="d-bar-item">
        <span class="d-bar-text">
          {{ listName }}<span class="d-text-small d-text-lightgray">&emsp;子项数：{{ list.length }}</span>
          <span class="d-text-small d-text-lightgray">&emsp;开启数：{{ countActive(list) }}</span>
        </span>
      </div>
      <div class="d-bar-item d-bar-item-btns">
        <span class="d-form-group-xxs" style="margin-right:8px">
          <input v-model="matchKeyword" class="d-form-input" type="text" placeholder="输入关键字过滤" />
        </span>
        <span @click="handleAddChild" class="d-bar-text d-text-linker d-text-lightgray" style="margin-right:8px"><PlusRoundIcon title="添加" /></span>
        <span @click="handleEdit(pageNode)" class="d-bar-text d-text-linker d-text-lightgray" style="margin-right:8px"><EditIcon class="rotate" title="编辑" /></span>
        <a v-show="getEnvHref(pageNode)" :href="getEnvHref(pageNode)" target="_blank" rel="noopener noreferrer" class="d-bar-text d-text-linker d-text-lightgray" style="margin-right:8px"><WindowsIcon title="打开新窗口" /></a>
        <span @click="refresh" class="d-bar-text d-text-linker d-text-lightgray" style="margin-right:8px"><RefreshIcon title="刷新" /></span>
        <span v-if="pageNode && pageNode.pid" @click="handleToParent" class="d-bar-text d-text-linker d-text-lightgray" style="margin-right:8px"><ToDownIcon class="rotate" title="进入父级" /></span>
        <span @click="handleBack"  class="d-bar-text d-text-linker d-text-lightgray"><ReturnIcon title="返回" /></span>
      </div>
    </div>
    <div v-if="!isTabStyle" class="pages">
      <div v-for="row in rows" :key="row.id" :class="'page-row-' + layout.rows" class="page-row">
        <div v-for="(col, n) in row.cols" :key="col.id" :class="'page-col-' + layout.cols" class="page-col">
          <div :id="'item_' + col.id" class="d-paner d-paner-full d-paner-condensed">
            <div class="d-paner-header">
              <div class="header-content">
                <div class="d-paner-caption">
                  <div :title="col.$current.name" class="d-caption-text">{{ col.$current.name }}</div>
                </div>
                <div class="d-bar-tools d-bar-tools-right">
                  <span v-if="isShowPageAction(col, 'isShowSwitch')" class="d-tools-item d-item-switch" title="打开或关闭">
                    <Switcher class="d-form-switch-xs" labelOn="开" labelOff="关" v-model="col.$current.$isActive" @onChange="handleChange(col, row, n)" />
                  </span>
                  <span v-if="isShowPageAction(col, 'isShowRefresh')" @click="handleRefresh(col.$current, row, n)" class="d-tools-item d-hidden">
                    <RefreshIcon class="item-icon" title="刷新" />
                  </span>
                  <span v-if="isShowPageAction(col, 'isShowScale')" @click="handleFullScreen(col, row, n)" class="d-tools-item item-full" :title="col.$isFull ? '重置' : '全屏'">
                    <RestoreScreenIcon v-if="col.$current.$isFull" />
                    <FullScreenIcon v-else />
                  </span>
                  <span class="d-tools-item">
                    <div class="d-dropdown d-drop-hover d-drop-right">
                      <MenuIcon title="更多" />
                      <div class="d-list-menu d-list-cascade d-list-cascade-right">
                        <ul class="d-list-menu-group">
                          <li v-if="col.children && col.children.length" class="d-list-menu-item">
                            <a class="d-list-item-row">
                              <ArrowLeftIcon class="d-list-item-icon" />
                              <span class="d-list-item-text">关联导航</span>
                            </a>
                            <ul class="d-list-menu-group d-list-menu-group-sm group-menu">
                              <li v-for="node in col.children" :key="node.id" class="d-list-menu-item">
                                <div class="d-list-item-row">
                                  <span class="d-list-item-text">{{ node.name }}</span>
                                  <span @click="handleChangeCurrent(node, col, row, n)" class="d-list-item-icon d-layout-flex"><PreviewIcon class="d-list-item-icon" title="切换预览" /></span>
                                  <a :href="getEnvHref(node)" class="d-list-item-icon d-layout-flex" target="_blank" rel="noopener noreferrer">
                                    <WindowsIcon title="打开新窗口" />
                                  </a>
                                  <span class="d-list-item-icon d-dropdown d-drop-hover d-drop-right dropdown-right">
                                    <MenuIcon title="更多" />
                                    <div class="d-list-menu">
                                      <ul class="d-list-menu-group">
                                        <li @click="handleCopy(node)" class="d-list-menu-item">
                                          <a class="d-list-item-row">
                                            <CopyIcon class="d-list-item-icon" title="复制" />
                                            <span class="d-list-item-text">复制</span>
                                          </a>
                                        </li>
                                        <li @click="handleEdit(node)" class="d-list-menu-item">
                                          <a class="d-list-item-row">
                                            <EditIcon class="d-list-item-icon" title="编辑" />
                                            <span class="d-list-item-text">编辑</span>
                                          </a>
                                        </li>
                                        <li @click="handleRemove(node)" class="d-list-menu-item">
                                          <a class="d-list-item-row">
                                            <DeleteIcon class="d-list-item-icon" title="删除" />
                                            <span class="d-list-item-text">删除</span>
                                          </a>
                                        </li>
                                        <li v-if="isPage(node) && col.layout && col.layout.isShowEnvirment" class="d-list-menu-item">
                                          <a class="d-list-item-row">
                                            <ArrowLeftIcon class="d-list-item-icon" />
                                            <span class="d-list-item-text">选择环境</span>
                                          </a>
                                          <ul class="d-list-menu-group d-list-menu-group-sm group-menu">
                                            <li v-for="env in envirmentList" :key="env.id" class="d-list-menu-item">
                                              <div class="d-list-item-row">
                                                <span class="d-list-item-text">{{ env.code }}</span>
                                                <a :href="getEnvHref(node, env.id)" class="d-list-item-icon d-layout-flex" target="_blank" rel="noopener noreferrer">
                                                  <WindowsIcon title="打开新窗口" />
                                                </a>
                                                <span @click="handleCopy(node, env.id)" :href="getEnvHref(node, env.id)" class="d-list-item-icon d-layout-flex">
                                                  <CopyIcon class="d-list-item-icon" title="复制" />
                                                </span>
                                              </div>
                                            </li>
                                          </ul>
                                        </li>
                                      </ul>
                                    </div>
                                  </span>
                                </div>
                              </li>
                            </ul>
                          </li>
                          <li v-if="isPage(col)" class="d-list-menu-item">
                            <a class="d-list-item-row">
                              <PowerIcon class="d-list-item-icon" title="开关" />
                              <span class="d-list-item-text" style="display:flex;align-items:center"><Switcher class="d-form-switch-xs" labelOn="开" labelOff="关" v-model="col.$current.$isActive" @onChange="handleChange(col, row, n)" /></span>
                            </a>
                          </li>
                          <li v-if="isPage(col)" class="d-list-menu-item">
                            <a @click="handleFullScreen(col, row, n)" class="d-list-item-row">
                              <RestoreScreenIcon v-if="col.$current.$isFull" class="d-list-item-icon" />
                              <FullScreenIcon v-else class="d-list-item-icon" />
                              <span class="d-list-item-text">{{ col.$isFull ? '重置' : '全屏' }}</span>
                            </a>
                          </li>
                          <li v-if="isPage(col)" class="d-list-menu-item">
                            <a :href="getEnvHref(col.$current)" class="d-list-item-row" target="_blank" rel="noopener noreferrer">
                              <WindowsIcon class="d-list-item-icon" title="打开新窗口" /><span class="d-list-item-text">打开窗口</span>
                            </a>
                          </li>
                          <li v-if="isPage(col) && col.layout && col.layout.isShowEnvirment" class="d-list-menu-item">
                            <a class="d-list-item-row">
                              <ArrowLeftIcon class="d-list-item-icon" />
                              <span class="d-list-item-text">选择环境</span>
                            </a>
                            <ul class="d-list-menu-group d-list-menu-group-sm group-menu">
                              <li v-for="env in envirmentList" :key="env.id" class="d-list-menu-item">
                                <div class="d-list-item-row">
                                  <span class="d-list-item-text">{{ env.code }}</span>
                                  <a :href="getEnvHref(col.$current, env.id)" class="d-list-item-icon d-layout-flex" target="_blank" rel="noopener noreferrer">
                                    <WindowsIcon title="打开新窗口" />
                                  </a>
                                  <span @click="handleCopy(col.$current, env.id)" :href="getEnvHref(col.$current, env.id)" class="d-list-item-icon d-layout-flex">
                                    <CopyIcon class="d-list-item-icon" title="复制" />
                                  </span>
                                </div>
                              </li>
                            </ul>
                          </li>
                          <li v-if="isPage(col)" class="d-list-menu-item">
                            <a @click="handleCopy(col.$current)" class="d-list-item-row">
                              <CopyIcon class="d-list-item-icon" title="复制" /><span :title="getEnvHref(col)" class="d-list-item-text">复制链接</span>
                            </a>
                          </li>
                          <li v-if="isPage(col)" class="d-list-menu-item">
                            <a @click="handleRefresh(col.$current, row, n)" class="d-list-item-row">
                              <RefreshIcon class="d-list-item-icon" title="刷新" /><span class="d-list-item-text">刷新页面</span>
                            </a>
                          </li>
                          <li v-if="isPage(col)" class="d-list-menu-item">
                            <a @click="handleChangeMain(col, row, n)" class="d-list-item-row">
                              <PreviewIcon class="d-list-item-icon" title="主屏预览" /><span class="d-list-item-text">主屏预览</span>
                            </a>
                          </li>
                          <li v-if="col.id" class="d-list-menu-item">
                            <a @click="handleIntoSub(col)" class="d-list-item-row">
                              <ToDownIcon class="d-list-item-icon" title="进入子级" /><span class="d-list-item-text">进入列表</span>
                            </a>
                          </li>
                          <li class="d-list-menu-item d-list-menu-item-setting">
                            <a @click="handleEdit(col)" class="d-list-item-row">
                              <EditIcon class="d-list-item-icon" title="编辑" /><span class="d-list-item-text">编辑</span>
                            </a>
                          </li>
                          <li class="d-list-menu-item d-list-menu-item-del">
                            <a @click="handleAddItemChild(col)" class="d-list-item-row">
                              <PlusRoundIcon class="d-list-item-icon" title="添加" /><span class="d-list-item-text">添加</span>
                            </a>
                          </li>
                          <li class="d-list-menu-item d-list-menu-item-del">
                            <a @click="handleRemove(col)" class="d-list-item-row">
                              <DeleteIcon class="d-list-item-icon" title="删除" /><span class="d-list-item-text">删除</span>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </span>
                </div>
              </div>
            </div>
            <div class="d-paner-body d-nopad">
              <iframe v-if="(isPage(col.$current) || getEnvHref(col.$current)) && col.$current.$isActive" :src="getEnvHref(col.$current)" class="d-iframe"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else :class="isFullScreenTab ? 'pages-tab-full' : ''" class="pages pages-tab">
      <tabs @tab-click="handleClickTab"
        :position="(pageNode.layout || {}).tabPosition"
        :type="(pageNode.layout || {}).tabType" ref="tabsView">
        <tabs-item
          v-for="(col, i) in tabItems[0].cols"
          :key="i + col.name"
          :title="col.name"
          :is-render-body="col.$current.$isActive"
          :data="col"
          :name="i">
          <template #nav>
            <span :class="col.$current.$isActive ? 'item-is-active' : ''" :title="col.name">{{ col.name }}</span>
          </template>
          <iframe v-if="getEnvHref(col.$current)" v-show="!col.isShowChild" :src="getEnvHref(col.$current)" class="d-iframe"></iframe>
          <div v-if="col.layout.isTabStyleChild" v-show="(col.isShowChild || !getEnvHref(col.$current))" class="d-iframe">
            <tabs @tab-click="handleClickTabChild"
              :position="(col.layout || {}).tabPosition || 'side-left'"
              :type="(col.layout || {}).tabType || 'rightline'" ref="tabsChildView">
              <tabs-item
                v-for="(cd, c) in col.children"
                :key="c + cd.name"
                :title="cd.name"
                :is-render-body="cd.$isActive"
                :data="cd"
                :name="c">
                <template #nav>
                  <span :class="cd.$isActive ? 'item-is-active' : ''" :title="cd.name">{{ cd.name }}</span>
                </template>
                <iframe v-if="getEnvHref(cd)" :src="getEnvHref(cd)" class="d-iframe"></iframe>
              </tabs-item>
              <template #navTail>
                <div class="d-bar tabs-nav-tail">
                  <div class="d-bar-item d-bar-item-btns">
                    <span v-if="isTabPage(currentTabChild)" class="d-tools-item d-item-switch" title="打开或关闭" style="margin-right:8px">
                      <Switcher class="d-form-switch-xs" labelOn="开" labelOff="关" v-model="currentTabChild.$isActive" @onChange="handleSwitchTab(currentTab)" />
                    </span>
                    <span v-show="currentTabChild && currentTabChild.$isActive"  @click="refreshTabChild" class="d-bar-text d-text-linker d-text-lightgray"><RefreshIcon title="刷新" /></span>
                  </div>
                </div>
              </template>
            </tabs>
          </div>
        </tabs-item>
        <template #navTail>
          <div class="d-bar tabs-nav-tail">
            <div class="d-bar-item d-bar-item-btns">
              <span v-if="currentTab && currentTab.$current" class="d-tools-item d-item-switch" title="打开或关闭" style="margin-right:8px">
                <Switcher class="d-form-switch-xs" labelOn="开" labelOff="关" v-model="currentTab.$current.$isActive" @onChange="handleSwitchTab(currentTab)" />
              </span>
              <span @click="refreshTab" class="d-bar-text d-text-linker d-text-lightgray" style="margin-right:8px"><RefreshIcon title="刷新" /></span>
              <span @click="fullscreenTab" class="d-bar-text d-text-linker d-text-lightgray" :title="isFullScreenTab ? '重置' : '全屏' " style="margin-right:8px">
                <RestoreScreenIcon v-if="isFullScreenTab" />
                <FullScreenIcon v-else />
              </span>
              <span class="d-bar-text d-text-linker d-text-lightgray d-more">
                <div class="d-dropdown d-drop-hover d-drop-right">
                  <MenuIcon title="更多" />
                  <div class="d-list-menu d-list-cascade d-list-cascade-right">
                    <ul class="d-list-menu-group">
                      <li v-if="currentTab.children && currentTab.children.length" class="d-list-menu-item">
                        <a class="d-list-item-row">
                          <ArrowLeftIcon class="d-list-item-icon" />
                          <span class="d-list-item-text">关联导航</span>
                        </a>
                        <ul class="d-list-menu-group d-list-menu-group-sm">
                          <li v-for="node in currentTab.children" :key="node.id" class="d-list-menu-item">
                            <div class="d-list-item-row">
                              <span class="d-list-item-text">{{ node.name }}</span>
                              <a :href="getEnvHref(node)" class="d-list-item-icon d-layout-flex" target="_blank" rel="noopener noreferrer">
                                <WindowsIcon title="打开新窗口" />
                              </a>
                              <span @click="handleCopy(node)" :href="getEnvHref(node)" class="d-list-item-icon d-layout-flex"><CopyIcon class="d-list-item-icon" title="复制" /></span>
                              <span @click="handleEdit(node)" class="d-list-item-icon d-layout-flex"><EditIcon class="d-list-item-icon" title="设置" /></span>
                            </div>
                          </li>
                        </ul>
                      </li>
                      <li v-if="isPage(currentTab) && currentTab.$isActive" class="d-list-menu-item">
                        <a :href="getEnvHref(currentTab.$current)" class="d-list-item-row" target="_blank" rel="noopener noreferrer">
                          <WindowsIcon class="d-list-item-icon" title="打开新窗口" /><span class="d-list-item-text">打开窗口</span>
                        </a>
                      </li>
                      <li v-if="isPage(currentTab) && currentTab.$isActive" class="d-list-menu-item">
                        <a @click="handleCopy(currentTab.$current)" class="d-list-item-row">
                          <CopyIcon class="d-list-item-icon" title="复制" /><span :title="getEnvHref(currentTab)" class="d-list-item-text">复制链接</span>
                        </a>
                      </li>
                      <li v-if="currentTab.id && currentTab.$isActive" class="d-list-menu-item">
                        <a class="d-list-item-row">
                          <Switcher class="d-form-switch-xs" labelOn="开" labelOff="关" v-model="currentTab.isShowChild" />
                          <span class="d-list-item-text">子级视图</span>
                        </a>
                      </li>
                      <li v-if="currentTab.id && currentTab.$isActive" class="d-list-menu-item">
                        <a @click="handleIntoSub(currentTab)" class="d-list-item-row">
                          <ToDownIcon class="d-list-item-icon" title="进入子级" /><span class="d-list-item-text">进入列表</span>
                        </a>
                      </li>
                      <li v-if="currentTab && currentTab.$isActive" class="d-list-menu-item d-list-menu-item-setting">
                        <a @click="handleEdit(currentTab)" class="d-list-item-row">
                          <EditIcon class="d-list-item-icon" title="编辑" /><span class="d-list-item-text">编辑</span>
                        </a>
                      </li>
                      <li class="d-list-menu-item d-list-menu-item-del">
                        <a @click="handleAddItemChild(pageNode)" class="d-list-item-row">
                          <PlusIcon class="d-list-item-icon" title="添加" /><span class="d-list-item-text">添加</span>
                        </a>
                      </li>
                      <li v-if="currentTab && currentTab.$isActive" class="d-list-menu-item d-list-menu-item-del">
                        <a @click="handleAddItemChild(currentTab)" class="d-list-item-row">
                          <PlusRoundIcon class="d-list-item-icon" title="添加子级" /><span class="d-list-item-text">添加子级</span>
                        </a>
                      </li>
                      <li v-if="currentTab && currentTab.$isActive" class="d-list-menu-item d-list-menu-item-del">
                        <a @click="handleRemove(currentTab)" class="d-list-item-row">
                          <DeleteIcon class="d-list-item-icon" title="删除" /><span class="d-list-item-text">删除</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </span>
            </div>
          </div>
        </template>
      </tabs>
    </div>
    <Edit @onSubmitSuccess="handleEditSuccess" ref="editView" />
  </div>
</template>

<script>
import {
  ReturnIcon,
  EditIcon, CopyIcon, DeleteIcon, FullScreenIcon,
  RestoreScreenIcon, RefreshIcon, WindowsIcon,
  MenuIcon, ListStyleIcon, ArrowLeftIcon, PreviewIcon,
  ToDownIcon, PlusRoundIcon, PowerIcon, PlusIcon
} from '@daelui/vdog/dist/icons'
import mixins from '@daelui/vdog/dist/mixins'
import { strer, layer, parser, arrayer, keycoder } from '@daelui/dogjs/dist/components'
import { Dialoger, Switcher, Tabs, TabsItem, Messager } from '@daelui/vdog/dist/components'
import Edit from './edit.vue'
import pageSer from '../../service/action/nave.action.js'
import dmap from '../../components/dmap'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import naveBus from './business/nave'
import { mapState } from 'vuex'

export default {
  mixins: [mixins],

  components: {
    Edit,
    ReturnIcon,
    EditIcon,
    CopyIcon,
    DeleteIcon,
    FullScreenIcon,
    RestoreScreenIcon,
    RefreshIcon,
    WindowsIcon,
    MenuIcon,
    ListStyleIcon,
    ArrowLeftIcon,
    ToDownIcon,
    PlusRoundIcon,
    PreviewIcon,
    PowerIcon,
    PlusIcon,
    Switcher,
    Tabs,
    TabsItem
  },

  computed: {
    ...mapState({
      isTabStyle: state => state.isTabStyle
    }),
    // 是否显示头
    isShowHead () {
      return !(this.pageNode && this.pageNode.layout && this.pageNode.layout.isShowHead === false)
    }
  },

  data () {
    return {
      // 过滤的关键字
      matchKeyword: '',
      // 列表名称
      listName: '',
      // 布局配置
      layout: {
        type: '',
        rows: 3,
        cols: 4
      },
      // 导航类型枚举
      pageTypeEnum: {
        DIR: 'dir',
        PAGE: 'page'
      },
      // 当前分组
      groupTitle: '',
      pageNode: {},
      // 源数据
      originList: [],
      // 数据列表
      list: [],
      // 排版列表
      rows: [],
      // 页签列表
      tabItems: [{cols: [], id: 1}],
      // 全屏的单元
      fullCell: null,
      // 编辑信息
      editInfo: {},
      // 环境列表
      envirmentList: [],
      // 当前环境
      envirment: '',
      // 页签是否全屏
      isFullScreenTab: true,
      // 当前Tab
      currentTab: {},
      // 当前子级页签
      currentTabChild: {}
    }
  },

  watch: {
    // 关键字过滤
    matchKeyword () {
      this.rows = this.getRows()
    }
  },

  methods: {
    /**
     * @function 获取行数据
    */
    getRows () {
      let config = this.layout
      // 按关键字过滤
      let list = this.filterKeyword(this.list)
      let tabItems = []
      let i = 0
      let arr = []
      // 页签模式下，仅一行多列
      let rows = parseInt(this.isTabStyle ? 1 : config.rows)
      rows = isNaN(rows) ? 3 : rows
      rows = rows < 1 ? 1 : rows
      let cols = parseInt(this.isTabStyle ? 10000 : config.cols)
      cols = isNaN(cols) ? 4 : cols
      cols = cols < 1 ? 1 : cols
      // 总条数据大于设置的行与列总数,增加总行数
      if (list.length > rows * cols) {
        rows = Math.ceil(list.length / cols)
      }
      for (let m = 0; m < rows; m++) {
        let row = {cols: [], id: Math.random()}
        for (let n = 0; n < cols; n++) {
          let node = list[i]
          if (node) {
            node.$isFull = !!node.$isFull
            node.$isActive = !!node.$isActive
            // 子级属性缺省
            if (Array.isArray(node.children)) {
              node.children.forEach(item => {
                item.$isFull = !!item.$isFull
                item.$isActive = !!item.$isActive
              })
            }
            row.cols.push(node)
          }
          i++
        }
        arr.push(row)
      }
      // 设置当前选中的节点
      arr.forEach(item => {
        item.cols.forEach(node => {
          node.$current = node
          node.children = Array.isArray(node.children) ? node.children : []
          node.children.forEach(cd => {
            cd.layout = parser.parse(cd.layout)
          })
          tabItems.push(node)
        })
      })

      this.tabItems = [{cols: tabItems, id: Math.random()}]
      return arr
    },

    /**
     * @function 导航开关
    */
    handleChange (col, row, n) {
      this.$set(row.cols, n, col)
    },

    /**
     * @function 刷新
    */
    handleRefresh (item, row, n) {
      // 未打开且全屏则打开
      if (!item.$isActive && item.$isFull) {
        item.$isActive = true
        this.handleChange(item, row, n)
        return true
      }
      // 已打开则刷新
      if (item.$isActive) {
        let href = this.getEnvHref(item)
        if (href) {
          item.href = ''
          setTimeout(function () {
            item.href = href
          }, 400)
        }
      }
    },

    /**
     * @function 保存全屏导航节点
    */
    setFullNode (node) {
      sessionStorage.setItem('fullPageNode', JSON.stringify(node))
    },

    /**
     * @function 获取全屏导航节点
    */
    getFullNode () {
      return sessionStorage.getItem('fullPageNode')
    },

    /**
     * @function 全屏切换
    */
    handleFullScreen (col, row, n) {
      col.$current.$isFull = !col.$current.$isFull
      this.handleChange(col, row, n)
      let el = document.querySelector(`#item_${col.id}`)
      if (el) {
        if (col.$current.$isFull) {
          el.classList.add('d-paner-fullscreen')
          this.fullCell = col
          this.setTitle(col.$current.name || this.groupTitle)
          this.setFullNode({id: col.id})
        } else {
          el.classList.remove('d-paner-fullscreen')
          this.fullCell = null
          this.setTitle(this.groupTitle)
          this.setFullNode({})
        }
      }
    },

    /**
     * @function 复制
    */
    handleCopy (col, settingEnv) {
      strer.copy(this.getEnvHref(col, settingEnv) || '')
      Messager.success('复制成功')
    },

    /**
     * @function 切换至全屏
    */
    handleChangeMain (col, row, n) {
      col.$current.$isActive = false
      col.$current.$isfull = false
      delete col.$current
      col.$isActive = true
      col.$current = col
      this.$set(row.cols, n, col)
      this.setTitle(col.name)
    },

    /**
     * @function 关联导航切换至全屏
    */
    handleChangeCurrent (node, col, row, n) {
      let $current = col.$current
      $current.$isActive = false
      node.$isActive = true
      col.$current = node
      this.$set(row.cols, n, col)
      this.setTitle(node.name)
    },

    /**
     * @function 全屏或刷新事件处理
    */
    handleKeyDown (e) {
      // 全屏退出处理
      if (e.keyCode === keycoder.Escape && this.fullCell) {
        this.handleFullScreen(this.fullCell)
      } else if ( // 刷新处理
        (e.keyCode === keycoder.f || e.keyCode === keycoder.F) &&
        this.fullCell && e.ctrlKey && e.shiftKey
      ) {
        this.handleRefresh(this.fullCell)
      }
    },

    /**
     * @function 获取指定节点
    */
    getNode (nodes, id) {
      let node = null
      nodes = Array.isArray(nodes) ? nodes : []
      nodes.forEach(item => {
        if (String(item.id) === String(id)) {
          node = item
        }
        if (!node && item.children) {
          let result = this.getNode(item.children, id)
          if (result) node = result
        }
      })

      return node
    },

    /**
     * @function 是否是导航
    */
    isPage (item) {
      // 当前选中节点
      let node = this.getCurrentNode(item)
      if (node.type === this.pageTypeEnum.PAGE || naveBus.getEnvHref(node)) {
        return true
      }
      return false
    },

    /**
     * @function 是否显示导航操作项
    */
    isShowPageAction (item, key) {
      let parent = this.pageNode.layout
      let child = item.layout
      let merge = Object.assign({}, parent, child)
      if (parent.isCoverChild && !child.isCoverParent) {
        merge = Object.assign({}, child, parent)
      }
      // 默认是导航则显示
      let b = this.isPage(item)
      // 非全屏状态
      if (!item.$current.$isFull && Object.prototype.hasOwnProperty.call(merge, key)) {
        if (String(merge[key]) === 'false') {
          b = false
        }
      }
      return b
    },

    /**
     * @function 是否是页签导航
    */
    isTabPage (node) {
      if (node && (naveBus.getEnvHref(node) || node.type === this.pageTypeEnum.PAGE)) {
        return true
      }
      return false
    },

    /**
     * @function 获取当前节点
    */
    getCurrentNode (item) {
      item = item || {}
      let currentId = String(item.currentId || '')
      // 默认取父节点
      let currentItem = item
      // 子节点
      let children = item.children
      children = Array.isArray(children) ? children : []
      children.forEach(node => {
        if (node && String(node.id) === currentId) {
          currentItem = node
        }
      })

      return currentItem
    },

    /**
     * @function 设置标题
    */
    setTitle (title) {
      this.listName = title
      this.setDocTitle(title)
    },

    /**
     * @function 全屏记忆
    */
    remberFull () {
      let fullPageNode = this.getFullNode()
      if (/{/.test(fullPageNode)) {
        let node = parser.toObject(fullPageNode)
        for (let i = 0; i < this.rows.length; i++) {
          let row = this.rows[i]
          for (let n = 0; n < row.cols.length; n++) {
            let col = row.cols[n]
            if (node.id === col.id) {
              setTimeout(() => {
                this.handleFullScreen(col, row, n)
                this.handleRefresh(col, row, n)
              })
              break
            }
          }
        }
      }
    },

    /**
     * @function 刷新
    */
    refresh () {
      this.list = []
      this.rows = []
      let id = this.$route.params.id
      // 查询指定id对就的树形数据
      pageSer.queryTree({ id }).then(res => {
        let list = ((res || {}).data || {}).list
        this.originList = list
        // 重新渲染视图
        this.review()
        // 初次加载,全屏记忆
        let onload = dmap.get('onload')
        if (onload === 1) {
          dmap.set('onload', 0)
          this.remberFull()
        }
      })
    },

    /**
     * @function 重新渲染视图
    */
    review () {
      let list = this.originList
      let id = this.$route.params.id
      // 导航数据
      let pages = []
      pages = Array.isArray(list) ? list : []
      let node = this.getNode(pages, id) || {}
      this.pageNode = node
      // 子级
      if (node && node.children) {
        // 排序
        this.list = node.children.sort((a, b) => {
          return arrayer.sort(a.order, b.order, true, 'desc') // a.order > b.order ? -1 : a.order < b.order ? 1 : 0
        })
        // 子级布局解析
        this.list.forEach(item => {
          this.parseLayout(item)
        })
      }
      // 布局配置
      this.parseLayout(node, true)
      // 列表
      this.rows = this.getRows()
      // 标题设置
      if (node && node.name) {
        this.groupTitle = node.name
        this.setTitle(this.groupTitle)
      }
      // 当前是否是页签模式
      this.$store.state.isTabStyle = this.pageNode && this.pageNode.layout && this.pageNode.layout.isTabStyle === true
      let fullScreenTab = sessionStorage.getItem('fullScreenTab')
      this.isFullScreenTab = fullScreenTab === 'true'
    },

    /**
     * @function 布局配置
    */
    parseLayout (node, isPage) {
      let mode = ((window.application || {}).tigerlair || {}).mode || {}
      let layout = node.layout || mode.layout
      if (/{/.test(layout)) {
        try {
          layout = parser.toObject(layout)
        } catch (e) {
          layout = null
        }
      }
      layout = layout || mode.layout || {}
      node.layout = Object.assign({
        rows: 3,
        cols: 4,
        isShowHead: true,
        isTabStyle: false,
        isShowSwitch: true,
        isShowRefresh: true,
        isShowScale: true,
        isCoverChild: false,
        isCoverParent: false,
        isShowEnvirment: false
      }, layout || {})
      // 导航级
      if (isPage) {
        this.layout = node.layout
      }
    },

    /**
     * @function 获取节点地址
    */
    getEnvHref (node, settingEnv) {
      return naveBus.getEnvHref(node, this.envirmentList, this.envirment, settingEnv)
    },

    /**
     * @function 编辑节点
    */
    handleEdit (item) {
      if (!item || !item.id) {
        return false
      }
      let node = {}
      for (let key in item) {
        if (typeof item[key] !== 'object' || key === 'layout' || key === 'hrefList') {
          node[key] = item[key]
        }
      }
      // 布局配置
      this.parseLayout(node, this.pageNode === node)
      this.editInfo = {
        item: node,
        edit: true
      }
      this.showEditView()
    },

    /**
     * @function 显示与隐藏编辑视图
    */
    showEditView () {
      this.$refs.editView.show(this.editInfo)
    },

    /**
     * @function 编辑成功
    */
    handleEditSuccess () {
      this.refresh()
    },

    /**
     * @function 删除多条数据
    */
    handleRemove (item) {
      let items = [item]
      Dialoger.confirm(locale.message.confirmDelete).then(b => {
        if (!b) {
          return false
        }
        items = items.map(item => item.id)
        pageSer.removeItem(items).then(result => {
          this.refresh()
        })
      })
    },

    /**
     * @function 进入子级
    */
    handleIntoSub (item) {
      this.$router.push(this.getMicroRoute('/nave/item/' + item.id))
      this.refresh()
    },

    /**
     * @function 添加子节点
    */
    handleAddChild () {
      let item = this.pageNode
      this.editInfo = {
        item: item,
        parent: true
      }
      this.showEditView()
    },
    /**
     * @function 添加子项的子节点
    */
    handleAddItemChild (item) {
      this.editInfo = {
        item: item,
        parent: true
      }
      this.showEditView()
    },
    /**
     * @function 进入父级
    */
    handleToParent () {
      this.$router.push(this.getMicroRoute('/nave/item/' + this.pageNode.pid))
      setTimeout(() => {
        if (/page\/item\/\w+/.test(this.$router.currentRoute.path)) {
          this.refresh()
        }
      }, 260)
    },
    /**
     * @function 返回
    */
    handleBack () {
      this.$router.back()
      setTimeout(() => {
        if (/page\/item\/\w+/.test(this.$router.currentRoute.path)) {
          this.refresh()
        }
      }, 260)
    },
    /**
     * @function 是否匹配关键字
    */
    filterKeyword (nodes) {
      nodes = Array.isArray(nodes) ? nodes : []
      let key = this.matchKeyword
      if (key && String(key).trim()) {
        key = String(key).trim().toLowerCase()
        nodes = nodes.filter(node => {
          return String(node.name || '').toLowerCase().indexOf(key) > -1
        })
      }
      return nodes
    },

    /**
     * @function 点击页签
    */
    handleClickTab (item) {
      this.currentTab = item.data
      this.currentTab.$current.$isActive = true
      this.tabItems[0].cols.forEach((col, n) => {
        if (col === this.currentTab) {
          this.$set(this.tabItems[0].cols, n, this.currentTab)
        }
      })
      // // 是否显示级
      // if (this.currentTab.layout.isTabStyleChild) {
      //   this.currentTab.isShowChild = true
      // }
    },

    /**
     * @function 刷新页签
    */
    refreshTab () {
      let tab = this.currentTab || {}
      let href = this.getEnvHref(tab.$current)
      if (tab && href) {
        tab.$current.$isActive = false
        this.tabItems[0].cols.forEach((col, n) => {
          if (col === tab) {
            this.$set(this.tabItems[0].cols, n, tab)
          }
        })
        setTimeout(() => {
          tab.$current.$isActive = true
          this.tabItems[0].cols.forEach((col, n) => {
            if (col === tab) {
              this.$set(this.tabItems[0].cols, n, tab)
            }
          })
        }, 400)
      }
    },

    /**
     * @function 切换子页签开关
    */
    handleSwitchTab (item) {
      this.tabItems[0].cols.forEach((col, n) => {
        if (col === this.currentTab) {
          this.$set(this.tabItems[0].cols, n, this.currentTab)
        }
      })
    },

    /**
     * @function 全屏子页签
    */
    fullscreenTab () {
      this.isFullScreenTab = !this.isFullScreenTab
      sessionStorage.setItem('fullScreenTab', String(this.isFullScreenTab))
    },

    /**
     * @function 点击子页签
    */
    handleClickTabChild (item) {
      this.currentTabChild = item.data
      this.currentTabChild.$isActive = true
      this.currentTab.children.forEach((col, n) => {
        if (col === this.currentTabChild) {
          this.$set(this.currentTab.children, n, col)
        }
      })
    },

    /**
     * @function 刷新子页签
    */
    refreshTabChild () {
      let tab = this.currentTabChild || {}
      if (tab && this.getEnvHref(tab)) {
        tab.$isActive = false
        this.currentTab.children.forEach((col, n) => {
          if (col === tab) {
            this.$set(this.currentTab.children, n, tab)
          }
        })
        setTimeout(() => {
          tab.$isActive = true
          this.currentTab.children.forEach((col, n) => {
            if (col === tab) {
              this.$set(this.currentTab.children, n, tab)
            }
          })
        }, 400)
      }
    },

    /**
     * @function 切换子页签开关
    */
    handleSwitchTabChild (item) {
      this.currentTab.children.forEach((col, n) => {
        if (col === this.currentTab) {
          this.$set(this.currentTab.children, n, this.currentTab)
        }
      })
    },

    countActive (list) {
      list = Array.isArray(list) ? list : []
      list = list.filter(item => {
        return item && (item.$isActive || (item.$current && item.$current.$isActive))
      })
      return list.length
    }
  },

  mounted () {
    this.refresh()
    // 按键事件处理
    document.removeEventListener('keydown', this.handleKeyDown)
    document.addEventListener('keydown', this.handleKeyDown)
    // 查询环境列表
    naveBus.queryListByGroup().then(res => {
      this.envirment = res.data.envirment
      this.envirmentList = res.data.envirmentList
    }).finally(() => {
      // 重新渲染
      this.review()
    })
    // 查询导航层级数据
    naveBus.queryTreeData()
    // 设置层级
    layer.setZIndex(101)
  }
}
</script>

<style lang="less" scoped>
.layout-full {
  flex: 1;
  width: 100%;
  height: 100%;
}
.d-bar {
  margin: 0 4px;
  padding-left: 8px;
  padding-right: 8px;
  .d-bar-item-btns {
    font-size: 18px;
  }
  .d-bar-item {
    margin: 0;
  }
  .d-bar-item:first-child {
    flex-basis: 50%;
  }
  & + .pages {
    height: calc(~"100% - 38px");
  }
  & + .pages-tab-full {
    height: 100%;
  }
}
.d-list-item-icon {
  color: #999;
}
.item-text {
  overflow: hidden;
  max-width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-return {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #999;
  cursor: pointer;
}
.pages {
  flex: 1;
  height: 100%;
  .d-paner-body {
    overflow: hidden;
  }
}
.page-row {
  display: flex;
  height: 100px;
}
.page-col {
  padding: 4px;
  width: 20%;
}
.page-row-1 {
  @p: (100 / 1);
  height: ~"@{p}%";
}
.page-row-2 {
  @p: (100 / 2);
  height: ~"@{p}%";
}
.page-row-3 {
  @p: (100 / 3);
  height: ~"@{p}%";
}
.page-row-4 {
  @p: (100 / 4);
  height: ~"@{p}%";
}
.page-row-5 {
  @p: (100 / 5);
  height: ~"@{p}%";
}
.page-row-6 {
  @p: (100 / 6);
  height: ~"@{p}%";
}
.page-row-7 {
  @p: (100 / 7);
  height: ~"@{p}%";
}
.page-row-8 {
  @p: (100 / 8);
  height: ~"@{p}%";
}
.page-row-9 {
  @p: (100 / 9);
  height: ~"@{p}%";
}
.page-row-10 {
  @p: (100 / 10);
  height: ~"@{p}%";
}
.page-row-11 {
  @p: (100 / 11);
  height: ~"@{p}%";
}
.page-row-12 {
  @p: (100 / 12);
  height: ~"@{p}%";
}
.page-row-13 {
  @p: (100 / 13);
  height: ~"@{p}%";
}
.page-row-14 {
  @p: (100 / 14);
  height: ~"@{p}%";
}
.page-row-15 {
  @p: (100 / 15);
  height: ~"@{p}%";
}
.page-row-16 {
  @p: (100 / 16);
  height: ~"@{p}%";
}
.page-col-1 {
  @p: (100 / 1);
  width: ~"@{p}%";
}
.page-col-2 {
  @p: (100 / 2);
  width: ~"@{p}%";
}
.page-col-3 {
  @p: (100 / 3);
  width: ~"@{p}%";
}
.page-col-4 {
  @p: (100 / 4);
  width: ~"@{p}%";
}
.page-col-5 {
  @p: (100 / 5);
  width: ~"@{p}%";
}
.page-col-6 {
  @p: (100 / 6);
  width: ~"@{p}%";
}
.page-col-7 {
  @p: (100 / 7);
  width: ~"@{p}%";
}
.page-col-8 {
  @p: (100 / 8);
  width: ~"@{p}%";
}
.page-col-9 {
  @p: (100 / 9);
  width: ~"@{p}%";
}
.page-col-10 {
  @p: (100 / 10);
  width: ~"@{p}%";
}
.page-col-11 {
  @p: (100 / 11);
  width: ~"@{p}%";
}
.page-col-12 {
  @p: (100 / 12);
  width: ~"@{p}%";
}
.page-col-13 {
  @p: (100 / 13);
  width: ~"@{p}%";
}
.page-col-14 {
  @p: (100 / 14);
  width: ~"@{p}%";
}
.page-col-15 {
  @p: (100 / 15);
  width: ~"@{p}%";
}
.page-col-16 {
  @p: (100 / 16);
  width: ~"@{p}%";
}
.header-content {
  display: flex;
  width: 100%;
}
.d-bar-tools {
  overflow: visible;
  padding: 0;
}
.d-item-link {
  .d-icon-svg, .item-link-text {
    vertical-align: middle;
  }
  .item-link-text {
    margin-left: 8px;
  }
}
.d-paner-fullscreen {
  border: none;
  .d-paner-header {
    position: relative;
    padding: 0;
    height: 0;
    border: none;
  }
  .header-content {
    position: absolute;
    display: flex;
    overflow: visible;
    top: 0;
    height: 0;
    width: 100%;
  }
  .d-paner-caption {
    overflow: hidden;
    visibility: hidden;
    height: 0;
  }
  .d-bar-tools {
    padding-right: 4px;
    height: 24px;
    opacity: 0.2;
    &:hover {
      opacity: 0.8;
    }
    .d-item-switch {
      display: none;
    }
    .item-full {
      display: block;
    }
    .d-hidden {
      display: inline;
    }
    .d-list-menu-item-setting,
    .d-list-menu-item-del {
      display: none;
    }
  }
}
.menu-group-sm .d-icon-svg {
  font-size: 16px;
}
.rotate {
  transform: rotate(180deg)
}
.group-menu {
  max-height: 274px;
  overflow: auto;
}
.d-list-cascade-right .dropdown-right .d-list-menu-group {
  right: 0;
}
.dropdown-right {
  &:hover {
    .d-list-menu .d-list-menu-group {
      display: block;
    }
  }
}
</style>

<style lang="less">
.d-contenter-tab.d-contenter {
  padding: 0;
  .pages-tab-full {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
  }
  
  .d-bar {
    margin-left: 0;
    margin-right: 0;
  }
  .d-tabs-top {
    display: flex;
    height: 100%;
  }
  .d-tabs-bottom {
    display: flex;
    height: 100%;
  }
  .d-tabs-side-left {
    display: flex;
    height: 100%;
    .d-tabs-nav,.d-tabs-paner{
      height: 100%;
    }
    .d-tabs-nav {
      flex-direction: column-reverse;
    }
  }
  .d-tabs-side-right {
    display: flex;
    height: 100%;
    .d-tabs-nav,.d-tabs-paner{
      height: 100%;
    }
    .d-tabs-nav {
      flex-direction: column-reverse;
    }
  }
  .d-tabs-paner {
    flex: 1;
  }
  .d-paner-list,.d-paner-item {
    height: 100%;
  }
  .tabs-nav-tail {
    justify-content: flex-end;
    position: relative;
    width: 150px;
    border: none;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #e4e7ed;
      z-index: 1;
    }
    .d-bar-item-btns {
      justify-content: flex-end;
      flex-basis: 100%;
      font-size: 20px;
    }
    .d-item-switch {
      display: flex;
      align-items: center;
    }
    .d-switch-slider {
      font-size: 14px;
    }
    .d-dropdown {
      height: 20px;
      & > .d-icon-svg {
        vertical-align: top;
      }
    }
    .d-bar-item,.d-bar-text {
      overflow: visible;
    }
    .d-list-item-text {
      font-size: 14px;
      font-weight: 400;
    }
  }
  .d-tabs-side-left,.d-tabs-side-right {
    .d-tabs-nav {
      max-width: 240px;
    }
    .tabs-nav-tail {
      width: auto;
    }
  }
  .item-is-active {
    &:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 4px;
      margin-top: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #69C13D;
    }
  }
  .d-paner-item {
    .d-paner-item-content {
      padding: 0;
      height: 100%;
    }
  }
}
.d-iframe {
  .d-tabs-paner {
    .d-tabs {
      height: 100%;
    }
    .d-tabs-nav {
      .d-nav-container {
        padding-bottom: 36px;
      }
    }
  }
}
.d-tabs-paner {
  .d-iframe {
    .d-tabs {
      height: 100%;
    }
  }
}
.pages-tab {
  & > .d-tabs-underline {
    & > .d-tabs-paner {
      height: calc(~"100% - 48px");
    }
  }
  & > .d-tabs-side-left,& > .d-tabs-side-right {
    .tabs-nav-tail {
      width: auto;
    }
    & > .d-tabs-nav {
      flex-direction: column-reverse;
    }
    .d-nav-item {
      max-width: 200px;
      word-break: normal;
      word-wrap: break-word;
      white-space: normal;
    }
  }
  .d-tabs-paner {
    height: 100%;
  }
}
</style>
